<template>
  <div>

    <!-- <van-cell-group>
      <van-cell title="添加模板图片">
        <div slot="right-icon">
          <van-button type="primary"
                      size="small"
                      @click="uploadImage">添加图片</van-button>
        </div>
      </van-cell>
    </van-cell-group> -->

    <div class="warp">
      <div class="list">
        <div v-for="item in imageArray"
             class="imgList"
             v-bind:key="item._id">
          <image class="imgItem"
                 mode=widthFix
                 :src="item.url"
                 :data-src="item.url"
                 @longpress="selectImage"
                 @click="previewImage"></image>
        </div>
      </div>
    </div>

    <van-submit-bar @submit="goUploadImage"
                    button-text="添加图片" />

    <van-toast id="van-toast" />
  </div>
</template>

<script>
/**
 * 系统首页
 */
import Toast from '@/../static/vant/toast/toast'
var util = require('../../utils/index.js')
export default {
  components: {
  },
  data () {
    return {
      aiImage: 'https://ssl-oss.raiseinfo.cn/add.png',
      imageArray: []
    }
  },
  computed: {

  },
  methods: {
    goUploadImage () {
      wx.navigateTo({
        url: '/pages/croper/main?type=public'
      })
    },
    selectImage (e) {
      console.log(e)
      Toast('选择图片进行进一步操作')
    },
    previewImage (e) {
      // console.log(e)
      let imgArray = []
      this.imageArray.forEach(element => {
        imgArray.push(element.url)
      })
      var current = e.mp.target.dataset.src
      wx.previewImage({
        current: current,
        urls: imgArray
      })
    },
    uploadImage () {
      let that = this
      wx.chooseImage({
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          Toast('上传中...')
          let filePath = res.tempFilePaths[0]
          const name = Math.random() * 1000000
          const cloudPath = name + filePath.match(/\.[^.]+?$/)[0]
          wx.cloud.uploadFile({
            cloudPath, // 云存储图片名字
            filePath, // 临时路径
            success: function (res) {
              Toast.clear()
              that.aiImage = res.fileID
              const db = wx.cloud.database()
              const imageList = db.collection('image_list')
              imageList.add({
                data: {
                  url: res.fileID,
                  type: 'public',
                  updated: util.formatTime(new Date())
                }
              }).then(res => {
                that.getImageList()
                console.log(res)
              })
            },
            fail: function (res) {
              console.log('上传图片失败：', res)
            }
          })
        },
        fail: function (res) {
          console.log('选择图片失败：', res)
        }
      })
    },
    getImageList () {
      const db = wx.cloud.database()
      const imageList = db.collection('image_list')
      imageList.get().then(res => {
        console.log(res)
        this.imageArray = res.data
      })
    }
  },

  mounted () {
    this.getImageList()
  }
}
</script>

<style scoped>
.warp {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  padding-bottom: 50px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 735rpx;
  margin-right: 5rpx;
  background-color: rgba(0, 0, 0, 0.8);
}
.imgList {
  display: flex;
  width: 235rpx;
  margin-top: 11rpx;
  margin-left: 10rpx;
  border-radius: 5rpx;
}
.imgItem {
  display: flex;
  width: 100%;
}
</style>
